<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品规格查询 - [[${T(com.b2c.erp.DataConfigObject).getInstance().getSysName()}]]</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;top: 0px;">

    <!-- start sp-wrapper -->
    <link rel="stylesheet" href="/sb/stock.css"/>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <ul class="layui-tab-title">
                <!-- <li><a th:href="@{/shop/goods_list}">网店商品管理</a></li> -->
                <li ><a href="/goods/list">ERP商品查询</a></li>
                <li class="layui-this"><a class="order-item" href="/goods/spec_list">商品规格查询</a></li>
                <li><a href="/goods/category_list">商品分类管理</a></li>
                <li><a href="/goods/info_list_for_supplier">供应商商品库</a></li>
            </ul>
        </ul>
    </div>
    <div class="sp-wrapper">
<!--        <h2 class="sp-title"><span>商品SKU库存查询</span></h2>-->
        
        <fieldset class="layui-elem-field">
            <legend>搜索</legend>
            <div class="layui-field-box">
                <form class="layui-form layui-form-pane1" action="/goods/spec_list" method="get">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <input type="text" id="number" name="number" placeholder="SKU编码/商品编码" th:value="${number}"  class="layui-input" style="width: 260px;">
                        </div>
<!--                        <div class="layui-inline">-->
<!--                            <div class="layui-input-inline">-->
<!--                                <select id="categoryId" name="categoryId">-->
<!--                                    <option value="">全部商品分类</option>-->
<!--                                    <option value="1">医疗器械</option>-->
<!--                                    <option value="4">男装</option>-->
<!--                                    <option value="5" >女装</option>-->
<!--                                    <option value="8">百货</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                            <select id="filter0" name="filter0">
                                <option value="0">默认排序</option>
                                <option value="1" selected>库存排序</option>
                            </select>
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button lay-submit="" class="layui-btn" lay-filter="scanCode">查询</button>
                            <b>总SKU数：&nbsp;[[${totalSize}]]&nbsp;</b>，&nbsp;总库存数：<b style="color: red;font-weight: bold" th:text="${totalQty}"></b>
                         
                            <b><input type="button" class="layui-btn layui-btn-primary " id="excel_sku_btn" value="导出商品SKU信息"></b>
                        </div>
                        <div class="layui-inline"></div>

                    </div>
                </form>



            </div>
        </fieldset>

        <div class="sp-table" >
            <table>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>规格ID</th>
                    <th>图片</th>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>sku编码</th>
                    <th>商品规格</th>
                    <th>采购价</th>
                   <!-- <th>单位</th>-->
                    <th>所在仓位</th>
                    <!--<th>当前库存</th>-->
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="StockVo,item:${lists}">
                    <td th:text="${item.count}"></td>
                    <td th:text="${StockVo.id}"></td>
                    <td><img class="pimg" th:src="*{#strings.isEmpty(StockVo.colorImage)} ? *{StockVo.getImage()} : *{StockVo.colorImage}"  style="width: 50px;height: 50px;" /></td>
                    <td th:text="${StockVo.getNumber()}">10000</td>
                    <td th:text="${StockVo.getGoodsName()}">新款连衣裙2019</td>
                    <td th:text="${StockVo.getSpecNumber()}">10000-01</td>
                    <td >
                        <i th:text="${StockVo.colorValue}"></i>&nbsp;
                        <i th:text="${StockVo.sizeValue}"></i>&nbsp;
                        <i th:text="${StockVo.styleValue}"></i>&nbsp;
                    </td>

                    <td >
                        <b th:text="${StockVo.purPrice}"></b>
                        <i class="layui-icon layui-icon-edit edit_purPrice"  th:attr="data-id=${StockVo.id},purPrice=${StockVo.purPrice}"  ></i>
                    </td>
                    <td >
                        <div>
                            <ul>
                                <li th:each="vo : ${StockVo.getStockList()}">
                                    <b>仓位：<b th:text="${vo.getLocationName()}"></b></b>
                                    <b>库存：<b th:text="${vo.getCurrentQty()}"></b></b>
                                    <b>锁定：<b th:text="${vo.getLockedQty()}"></b></b>
                                </li>
                                <li th:if="${StockVo.getStockList()==null || StockVo.getStockList().size()==0}">
                                    <a href="javascript:;" th:attr="data-id=${StockVo.getId()}" class="fenpei_house">分配仓位</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                    <!--<td th:text="${StockVo.getQty()}">1000</td>-->
                    <td >
                        <i class="item_detail" th:attr="data-id=${StockVo.id}" >批次详情</i>
                        <i class="detail" th:attr="data-number=${StockVo.getSpecNumber()}" >查看记录</i>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="pages">
            <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
        </div>

    </div>

    <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
        <div id="innerdiv" style="position:absolute;">
            <img id="bigimg" style="border:5px solid #fff;" src="" />
        </div>
    </div>
    <!-- 模板 新增/修改 -->
    <script type="text/template" id="tpl-1">
        <div class="T-box">
            <p><span>仓位编号</span><input id="fl-number" type="text"/></p>
            <!--            <p><span>仓位名称</span><input id="fl-name" type="text"/></p>-->
        </div>
    </script>
    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>
    <script type="text/javascript">
/*        $(function () {
            $("#number").val('')
            $("#number").focus();

        })*/
        layui.use(['laydate', 'layer','form'], function () {
            var laydate = layui.laydate;
            var layer = layui.layer;
            var form = layui.form;

            $("#filter0").val('[[${filter0}]]');
            $("#categoryId").val('[[${categoryId}]]');
            form.render("select");

            //
            //修改采购价
            $(".edit_purPrice").click(function(){
                    var id = $(this).attr('data-id');
                    var purPrice = $(this).attr('purPrice');
                    var obj = $(this).siblings('b').eq(0);

                    layer.prompt({
                        formType: 3,
                        value: purPrice,
                        title: '请输入采购价'
                    }, function(value, index, elem){
                        var data = {id:id, purPrice:value};
                        $.ajax({
                            url: "/ajax_goods/upd_erp_good_spec_purPrice",
                            type: "POST",
                            dataType: "JSON",
                            contentType: 'application/json',
                            data:JSON.stringify(data),
                            success: function (res) {

                                if(res.code == 0){

                                    $(obj).text(value);
                                    layer.close(index)
                                    layer.msg("SUCCESS");
                                    // location=location;
                                }else
                                    layer.alert(res.msg);
                            }
                        });
                });
            });//修改结束

            $(".detail").click(function () {
                var number = $(this).attr("data-number");
                //iframe层
                layer.open({
                    type: 2,
                    title: '详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/stock/spec_search_logs?number=' + number //iframe的url
                });
            });


            //批次详情
            $(".item_detail").click(function () {
                var id = $(this).attr("data-id");
                layer.open({
                    type: 2,
                    title: '批次详情',
                    shadeClose: true,
                    shade: 0.8,
                    area: ['940px', '90%'],
                    content: '/stock/stock_info_item?specId=' + id 
                });
            });

            // 修改
            $('.fenpei_house').click(function () {
                var data_id = $(this).attr('data-id');

                Tips.alert({
                    title: '分配仓位',
                    content: $('#tpl-1').html(),
                    render: function () {
                    },
                    before: function () {
                        var number = $('#fl-number');

                        if (number.val() == '') {
                            alert("仓位编码不能为空");
                            return false;
                        }

                        var dataObj = {
                            "id": data_id,
                            "number": number.val(),
                        };
                        // alert(JSON.stringify(dataObj))
                        // ajax处理
                        $.ajax({
                            url: '/stock/stock_location_apportion',
                            type: "POST",
                            dataType: 'json',
                            contentType: 'application/json',
                            data: JSON.stringify(dataObj),
                            success: function (res) {
                                if (res.code == 0) {
                                    Tips.close();
                                    location.reload(true);
                                } else {
                                    alert(res.msg);
                                }
                            },
                            complete: function(XMLHttpRequest){
                                if (XMLHttpRequest.getResponseHeader("REDIRECT")=="NO_ACCESS")alert("无权限访问");
                            },
                        });
                        return false;
                    }
                });
            });

            $(".pimg").click(function(){
                var _this = $(this);//将当前的pimg元素作为_this传入函数
                imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
            });

            function imgShow(outerdiv, innerdiv, bigimg, _this){
                var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
                $(bigimg).attr("src", src);//设置#bigimg元素的src属性

                /*获取当前点击图片的真实大小，并显示弹出层及大图*/
                $("<img/>").attr("src", src).load(function(){
                    var windowW = $(window).width();//获取当前窗口宽度
                    var windowH = $(window).height();//获取当前窗口高度
                    var realWidth = this.width;//获取图片真实宽度
                    var realHeight = this.height;//获取图片真实高度
                    var imgWidth, imgHeight;
                    var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

                    if(realHeight>windowH*scale) {//判断图片高度
                        imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                        imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                        if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                            imgWidth = windowW*scale;//再对宽度进行缩放
                        }
                    } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                        imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                        imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
                    } else {//如果图片真实高度和宽度都符合要求，高宽不变
                        imgWidth = realWidth;
                        imgHeight = realHeight;
                    }
                    $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

                    var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
                    var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
                    $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
                    $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
                });

                $(outerdiv).click(function(){//再次点击淡出消失弹出层
                    $(this).fadeOut("fast");
                });
            }
        });
    $("#excel_btn").click(function () {
        //组合条件
        var url = "/stock/spec_stock_info_export";
        window.open(url, "_blank");
    })
    $("#excel_sku_btn").click(function () {
        //组合条件
        var url = "/ajax_goods/goods_spec_export";
        window.open(url, "_blank");
    })

    </script>
    <!-- end sp-wrapper -->

</div>
</body>
<html>
